<template>
    <div>



        <el-row :gutter="20">
            <el-col :span="6">
                <div>

                    <el-statistic group-separator="," :value="value1" title="在线人数">
                    </el-statistic>
                </div>
            </el-col>
            <el-col :span="6">
                <div>
                    <el-statistic title="总文件数" :value="value2">
                        <template slot="suffix">
                            <i class="el-icon-s-flag" style="color: blue"></i>
                        </template>

                    </el-statistic>
                </div>
            </el-col>
            <el-col :span="6">
                <div>
                    <el-statistic title="分享文件数" group-separator="," decimal-separator="." :value="value3">
                        <template slot="prefix">
                            <i class="el-icon-s-flag" style="color: red"></i>
                        </template>
                    </el-statistic>
                </div>
            </el-col>
            <el-col :span="6">
                <div>
                    <el-statistic :value="value4" title="回收站文件数">
                        <template slot="suffix">
                            <i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
                        </template>
                    </el-statistic>
                </div>
            </el-col>
        </el-row>
        <hr>
        <el-row :gutter="20">
            <el-col :span="10">
                <el-card class="boxcard" shadow="hover" style="height: 200px;">
                    <div slot="header" class="card-header">
                        <h3 class="card-title">容量使用情况</h3>
                    </div>
                    <div class="card-content">
                        <el-progress :percentage="percentage" />
                    </div>
                </el-card>
            </el-col>
            <el-col :span="14">
                <el-card class="boxcard" shadow="hover" style="height:  200px;">
                    <div slot="header" class="card-header">
                        <h3 class="card-title">关于作者</h3>
                    </div>
                    <div class="card-content" style="display: flex; align-items: center; ">
                        <p style="margin: 0;">19数字媒体技术二班_周刚</p>
                    </div>
                </el-card>

            </el-col>
        </el-row>
        <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="自主开发  Independent Development " name="1">
                <div>相较于现有的商业化云盘软件，Web云盘系统由作者自主开发，</div>
                <div>更好地满足用户的个性化需求，并且不受商业化、功能扩展限制等问题困扰。</div>
            </el-collapse-item>
            <el-collapse-item title="权限管理   Authority Management " name="2">
                <div>通过角色管理机制和其他规则的设定，</div>
                <div>帮助管理员更好地掌握用户在系统中的操作行为、文件分享控制。</div>
            </el-collapse-item>
            <el-collapse-item title="特色功能  Features " name="3">
                <div>如在线预览、智能分类、共享权限设置等。</div>
                <div>进一步提高用户体验和便捷性。</div>
            </el-collapse-item>
            <el-collapse-item title="多交互界面  Multi-interface " name="4">
                <span>寻真云盘管理员后台:</span><a href="http://127.0.0.1:7071">  http://192.168.20.6:7071</a>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
import userAPI from '../../api/login';
export default {
    data() {
        return {
            percentage: 2,
            like: true,
            value1: 0,
            value2: 0,
            value3: 0,
            value4: 0,
        }
    },
    methods: {
        getuseinfo() {
            userAPI.getUseStatus().then(res => {
                this.value1 = res.data.data.onlineNum
                this.value2 = res.data.data.allNum
                this.value3 = res.data.data.shareNum
                this.value4 = res.data.data.recycleNum
                console.log(res)
            })
        }
    },

    created() {
        //自动加载indexs方法
        this.getuseinfo();
    },
}
</script>

<style scoped lang="less">
.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.user {
    display: flex;
    align-items: center;

    img {
        width: 80px;
        height: 80px;
        border-radius: 10%;
        margin-right: 40px;
    }

    .userinfo {
        font-size: 25px;
    }
}

.logininfo {
    p {
        line-height: 30px;
        font-size: 16px;
        font-weight: bold;
        color: #797b7e;

        span {
            margin-left: 60px;
            color: #BF9270;
        }
    }
}

.boxcard {
    height: 100%;
}

.card-header {
    padding: 10px 20px;
    background-color: #f5fafd;
}
</style>
